<template>
	<view class="container margin">
		<!-- 顶部搜索 -->
		<view class="row header">
			<view class="row search-view">
				<input placeholder="请输入商家名称关键词" confirm-type="search" @confirm="onSearch" @input="onInput" :value="keywords"></input>
				<image class="auto-left" :src="url+'/static/imgs/search.png'"></image>
			</view>
			<view class="cancel" @click="onCancel">取消</view>
		</view>
		<block v-if="searchMode">
			<storeRowList :listData="storeList"></storeRowList>
			<view class="row paginate">
				<text>
					<block>{{config.show_loading?config.loading_msg:''}}</block>
					<block>{{config.show_finish?config.finish_msg:''}}</block>
					<block>{{config.show_empty?config.empty_msg:''}}</block>
				</text>
			</view>
		</block>
		<view class="col" v-else>
			<view class="title">历史记录</view>
			<view class="history-view">
				<view class="history-item row" v-for="(item,index) in searchHistory" :key="index">
					<text @click="clickItem" :data-index="index">{{item}}</text>
					<!-- <image :src="url+'/static/imgs/close.png'"></image> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var app = getApp();
	import storeRowList from '../../../components/storeRowList.vue';
	import http from '../../../common/js/request.js';
	import common from "../../../common/js/function.js";
	export default {
		data() {
			return {
				url: app.globalData.baseImgUrl,
				searchHistory: uni.getStorageSync('searchHistory') || [],
				keywords: '',
				storeList: [],
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				searchMode: false
			}
		},
		onLoad() {
			this._setConfig();
		},
		components: {
			storeRowList
		},
		methods: {
			_setConfig(callback = '') {
				var that = this;
				that.storeList = [];
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			onSearch() {
				var that = this;
				that._setConfig(function() {
					that.getStoreList();
				});
			},
			getStoreList() {
				var that = this;
				if (!that.keywords) {
					that.storeList = [];
					return;
				}
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				uni.showLoading();
				http.post('/api/v1/common/store_list', {
					page: current_page,
					keyword: that.keywords
				}, res => {
					that.storeList = that.storeList.concat(res.datas);
					that.searchMode = true;
					that.config.show_loading = false; //关闭loading
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
					uni.hideLoading();
					if (current_page != 1 || !that.keywords) return;
					if (that.searchHistory.indexOf(that.keywords) > -1) {
						that.searchHistory.splice(that.searchHistory.indexOf(that.keywords), 1);
					}
					that.searchHistory.unshift(that.keywords);
					that.searchHistory = that.searchHistory.slice(0, 8)
					uni.setStorage({
						key: 'searchHistory',
						data: that.searchHistory
					});
				});
			},
			onReachBottom() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getStoreList();
			},
			onPullDownRefresh() {
				var that = this;
				that.onSearch();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			onInput(e) {
				this.keywords = e.detail.value;
			},
			onCancel() {
				this.keywords = '';
				this.searchMode = false;
			},
			clickItem(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				that.keywords = that.searchHistory[index];
				that.onSearch();
			}
		}
	}
</script>

<style>
	.title {
		color: #333;
		font-size: 30rpx;
	}

	.history-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
	}

	.history-item {
		display: inline-block;
		font-size: 28rpx;
		color: #555555;
		background: rgba(245, 245, 245, 1);
		padding: 0 20rpx;
		height: 67rpx;
		line-height: 67rpx;
		/* margin: 40rpx 28rpx 0 0; */
		margin-top: 40rpx;
		margin-right: 28rpx;
		border-radius: 10rpx;
	}

	.header {
		align-items: center;
	}

	.header .cancel {
		margin-left: 20rpx;
		color: #333;
		font-size: 28rpx;
		align-items: center;
	}

	.search-view {
		flex: 1;
		margin: 24rpx 0rpx;
		height: 80rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 10rpx;
		align-items: center;
		padding: 0rpx 45rpx;
		font-size: 28rpx;
	}

	.search-view input {
		flex: 1;
	}


	.search-view image {
		width: 28rpx;
		height: 28rpx;
	}
</style>
